<template>
  <div class="my">
        <div class="my_head">
            <span>&lt;</span>
            <span>个人中心</span>
            <span>···</span>
        </div>
        <div class="userinfo">
          <div class="user_content">
            <div class="username">
            <van-image round :src="userinfo.head"/>
            <span >
              {{userinfo.nickname}}
            </span>
            </div>
            <div>
              <van-icon name="setting" size="30" color="#555"/>
              <p>设置</p>
            </div>
          </div>
          <!-- 收藏部分 -->
          <div class="collection">
            <div>
              <span>0</span>
              <p>商品收藏</p>
            </div>
             <div>
              <span>0</span>
              <p>商店收藏</p>
            </div>
             <div>
              <span>0</span>
              <p>我的足迹</p>
            </div>
          </div>
        </div>
        <!-- 订单 -->
        <div class="order_type">
          <div>
            <van-icon name="coupon" size="35" color="rgb(248,200,69)"/>
            <p>待付款</p>
            <div class="badge">
                1
            </div>
          </div>
          <div>
            <van-icon name="star" size="35" color="rgb(248,200,69)"/>
            <p>待收货</p>
            <div class="badge">
                2
            </div>
          </div>
          <div>
            <van-icon name="gem" size="35" color="rgb(248,200,69)"/>
            <p>退货</p>
            <div class="badge">
                3
            </div>
          </div>
          <div>
            <van-icon name="clear" size="35" color="rgb(248,200,69)"/>
            <p>全部订单</p>
            <div class="badge">
                5
            </div>
          </div>
        </div>
        <!-- 退出登录 -->
        <div class="logout" @click="logout">
          <div>退出登录</div>
          <div>&gt;</div>
        </div>
        <!-- 推荐 -->
        <recommend></recommend>
  </div>  
</template>

<script>
import {getInfo} from "../../api/user"
import recommend from "../../components/commom/recommend"
export default {
  name: "home",
  data() {
    return {
      userinfo:{},
      userid:""
    }
  },
  components:{
    recommend
  },
  methods: {
    async getUser(){
      var that = this
      console.log("uid:",that.userid)
      await getInfo({uid:that.userid}).then(res=>{
      console.log(res)
      that.userinfo = res.result.data
    })
    },
    logout(){
      localStorage.clear();
      this.$router.push('/home')
    },
    async getuserId(){
      if(localStorage.uid){
      this.userid = Number(localStorage.uid)
      console.log(1,Number(this.userid))
      }
      if(this.$route.params.uid){
        this.userid = Number(this.$route.params.uid)
        console.log(2,Number(this.userid))
      }
    }
  },
  created() {
    // 调用获取用户信息接口
    this.getuserId()
    this.getUser()
    
  },
};
</script>

<style lang="less" scoped>
.my{
    width: 100%;
    background-color: #f7f7f7;
    .my_head{
        box-sizing: border-box;
        padding: 0 50px;
        width: 100%;
        height: 100px;
        line-height: 100px;
        display: flex;
        justify-content: space-between;
        font-size: 30px;
        font-weight: bolder;
    }
}
.logout{
  width: 100%;
  height: 100px;
  line-height: 100px;
  display: flex;
  box-sizing: border-box;
  padding: 2px 50px;
  justify-content: space-between;
  font-size: 30px;
  font-weight: bold;
  background-color: white;
  margin-top: 50px;
}
.order_type{
  margin-top: 50px;
  background-color: white;
  width: 100%;
  height: 120px;
  padding: 10px 30px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  div{
    position: relative;
      .badge{
        position: absolute;
        width: 30px;
        height: 30px;
        line-height: 30px;
        color: white;
        right: 0;
        top: 0;
        background-color: #f20;
        border-radius: 50%;
      }
  }
}
.userinfo{
  overflow: hidden;
  height: 400px;
  background: url(https://img12.360buyimg.com/img/s1500x886_jfs/t1/112732/15/12911/161549/5f193338E83ab24c2/863b0e73f9a3d81f.png) no-repeat scroll 0 0 / cover;
  .collection{
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: space-around;
    margin-top: 50px;
    div{
      font-size: 24px;
      font-weight: bold;
      p{
        margin-top: 20px;
      }
    }
  }
  .user_content{
    margin-top: 50px;
    width: 100%;
    height: 100px;
    // line-height: 100px;
    display: flex;
    justify-content: space-around;
    .username{
      width: 60%;
      height: 100px;
      line-height: 75px;
      display: flex;
      font-size: 30px;
      font-weight: bolder;
      .van-image{
        width: 80px;
        height: 80px;
        margin-right: 30px;
      } 
    }
    
  }
}
</style>